<template>
    <el-dialog v-model="dialogVisible" title="字典类型" width="500px">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
            <el-form-item label="类型名称" prop="dictName">
                <el-input v-model="form.dictName" placeholder="请输入类型名称"></el-input>
            </el-form-item>
            <el-form-item label="类型编码" prop="dictType">
                <el-input v-model="form.dictType" placeholder="请输入类型编码"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="save">确认</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
import { reactive, toRefs } from "vue"
import { addDictType } from "@/api/system/sysdict.js"
import { ElMessage } from "element-plus"

export default {
    name: "addDictType",
    emits: ['rest'],
    setup(props, { emit}) {
        const data = reactive({
            dialogVisible: false,
            form: {},
            formRef: null,
            rules: {
                dictName: [{ required: true, message: '请输入类型名称', trigger: 'blur' }],
                dictType: [{ required: true, message: '请输入类型编码', trigger: 'blur' }],
            }
        })

        const openDialog = (e) => {
            data.dialogVisible = true
            data.form = { ...e }
        }

        const save = () => {
            data.formRef.validate((valid) => {
                if (valid) {
                    addDictType(data.form).then(res=>{
                        if(res.code == 200){
                            ElMessage.success('保存成功')
                            data.dialogVisible = false
                            emit('rest')
                        }
                    })
                }
            })
        }

        return {
            ...toRefs(data),
            openDialog,
            save
        }
    }
};
</script>
<style lang="scss" scoped>

</style>